<template>
  <div class="settings">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>本地模型配置</span>
              <el-button @click="$router.push('/')">返回首页</el-button>
            </div>
          </template>
          
          <el-form 
            :model="form" 
            label-width="120px" 
            v-loading="loading"
            class="settings-form"
          >
            <el-form-item label="已安装模型">
              <div v-if="availableModels.length > 0">
                <el-tag 
                  v-for="model in availableModels" 
                  :key="model" 
                  class="model-tag"
                >
                  {{ model }}
                </el-tag>
              </div>
              <div v-else class="form-tip">
                正在加载可用模型列表...
              </div>
              <div class="form-tip">这些是本地已部署的Ollama模型，无需手动配置</div>
            </el-form-item>
            
            <el-form-item label="最大生成长度">
              <el-input-number 
                v-model="form.max_tokens" 
                :min="1" 
                :max="4096"
              ></el-input-number>
            </el-form-item>
            
            <el-form-item label="生成多样性">
              <el-slider 
                v-model="form.temperature" 
                :min="0" 
                :max="2" 
                :step="0.1"
                :format-tooltip="value => value.toFixed(1)"
              ></el-slider>
            </el-form-item>
            
            <el-form-item label="显示思考过程">
              <el-switch
                v-model="form.show_thinking"
                active-text="开启"
                inactive-text="关闭"
              ></el-switch>
              <div class="form-tip">开启后，AI的回答会显示其思考过程</div>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveConfig" :loading="loading">保存配置</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { computed, reactive, onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

export default {
  name: 'Settings',
  setup() {
    const store = useStore()
    const form = reactive({
      max_tokens: 1000,
      temperature: 0.1,
      show_thinking: true
    })
    
    const availableModels = ref([])
    
    // 从store获取状态
    const loading = computed(() => store.state.loading)
    const llmConfig = computed(() => store.state.llmConfig)
    const error = computed(() => store.state.error)
    
    // 加载配置和可用模型
    onMounted(() => {
      // 加载模型配置
      store.dispatch('fetchLLMConfig').then(() => {
        if (llmConfig.value) {
          // 只更新表单中允许用户修改的字段
          if (llmConfig.value.max_tokens) {
            form.max_tokens = llmConfig.value.max_tokens
          }
          if (llmConfig.value.temperature) {
            form.temperature = llmConfig.value.temperature
          }
          if (llmConfig.value.show_thinking !== undefined) {
            form.show_thinking = llmConfig.value.show_thinking
          }
        }
      })
      
      // 加载可用模型列表
      fetch('/api/llm/models')
        .then(response => response.json())
        .then(data => {
          if (data && Array.isArray(data)) {
            availableModels.value = data
          }
        })
        .catch(err => {
          console.error('获取模型列表失败:', err)
          ElMessage.error('获取可用模型列表失败')
        })
    })
    
    // 保存配置
    const saveConfig = () => {
      store.dispatch('updateLLMConfig', form).then(() => {
        ElMessage.success('配置已保存')
      }).catch(() => {
        ElMessage.error('保存配置失败')
      })
    }
    
    // 重置表单
    const resetForm = () => {
      if (llmConfig.value) {
        if (llmConfig.value.max_tokens) {
          form.max_tokens = llmConfig.value.max_tokens
        }
        if (llmConfig.value.temperature) {
          form.temperature = llmConfig.value.temperature
        }
        if (llmConfig.value.show_thinking !== undefined) {
          form.show_thinking = llmConfig.value.show_thinking
        }
      }
    }
    
    return {
      form,
      loading,
      llmConfig,
      error,
      availableModels,
      saveConfig,
      resetForm
    }
  }
}
</script>

<style scoped>
.settings {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-tip {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.model-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style> 